<template lang="html">
  <div class="main-page">
    <nav-bar :title="'帮助中心'" @goBack="onClickLeft"/>
    <div class="main-content has-header-space">
      <div class="help-container">
        <div class="help_list" v-if="helpList.length !== 0" >
          <div v-for="(k, j) in helpList" v-bind:key="j">
            <h3>{{k.category_name}}</h3>
            <van-collapse v-model="activeNames" accordion :border="false">
              <van-collapse-item :name="item.id" v-for="(item, i) in k.question_items" v-bind:key="i">
                <div slot="title" class="help_title"><i class="van-icon"/> {{item.problem}} </div>
                <div class="a_content">
                  {{item.answer}}
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
        </div>
        <not-data v-else></not-data>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/global/nav-bar.vue'
import NotData from '@/components/global/not-data.vue'
import { Toast } from 'vant'
export default {
  components: { NotData, NavBar },
  data () {
    return {
      helpList: [],
      activeNames: ['1']
    }
  },
  created () {
    this.getHelpList()
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    getHelpList () {
      this.$Axios.get('help_problem?status=1').then((response) => {
        Toast.clear()
        if (response.return_code === '0000') {
          this.helpList = response.data.list
        } else {
          Toast(response.return_msg)
        }
      }).catch((error) => {
        console.log(error)
        Toast.clear()
        Toast('请求响应失败')
      })
    }
  }
}
</script>

<style lang="css" scoped>
</style>
